<template>
  <f-edit-table-sub ref="table" v-bind="options"> </f-edit-table-sub>
</template>
<script setup lang="ts">
import { h, reactive, ref } from 'vue';
const table = ref();
let list = new Array(20).fill(null).map((item, index) => ({
  id: index,
  uid: index,
  isMerge: index % 4 == 0,
  name1: 'name-' + index,
  x1: 'x1-' + index,
  x2: 'x2-' + index,
  x3: 'x3-' + index,
  x4: 'x4-' + index,
  x5: 'x5-' + index
}));
function handler(type, data: any, checked?: boolean) {
  return new Promise((resolve) => {
    if (type == 'edit') {
      list = list.map((item) => (item.uid == data.uid ? { ...data, $opType: void 0 } : item));
    } else if (type == 'remove') {
      list = list.filter((item) => item.uid != data.uid);
      console.log(list);
    } else if (type == 'add') {
      list.unshift({
        ...data,
        name7: 100000,
        uid: Math.random(),
        $opType: void 0
      });
    } else if (type == 'removeBatch') {
      list = list.filter((item) => !data.find((d) => d.uid == item.uid));
    } else if (type == 'switch') {
      list = list.map((item) => {
        if (data.uid == item.uid) {
          return {
            ...item,
            isEnabled: checked,
            $opType: void 0,
            id: void 0,
            loading_switch_isEnabled: void 0
          };
        }
        return item;
      });
    }
    setTimeout(() => {
      console.log(list.slice());
      resolve(true);
    }, 1);
  });
}
const type = ref(1);
const editMode = ref('row');
const title = ref('title');
setTimeout(() => {
  title.value = 'xxx';
}, 50);
const add = ref(false);
const options = reactive({
  status: 'replenishStatus',
  tableSlots: {},
  defaultExpand: false,
  expandOnClick: true,
  editMode: editMode,
  editRowTrigger: 'click-button',
  operates: { checkbox: false, add: add },
  params: [{ label: '我是一个按钮', click: () => {} }],
  table: {
    toolbarConfig: { search: false },
    pagerConfig: { autoHidden: false },
    spanMethod: (res) => {
      const { row } = res;
      if (row.isMerge) {
        return { col: 0, colspan: 8 };
      }
      return;
    },
    forms: [
      {
        title: '查询1',
        field: 'x1',
        type: 'super-set'
      },
      { title: '查询1', field: 'x2', type: 'input' },
      { title: '查询1', field: 'x3', type: 'input' },
      { title: '查询1', field: 'x4', type: 'input' },
      { title: '查询1', field: 'x5', type: 'input' }
    ],
    columns: [
      // {
      //   title: "字段1",
      //   field: "name1",

      //   type: "expand",
      //   renderExpand: ({ row }) => {
      //     return h("div", { class: "px15 py15" }, "展开内容" + row.name1);
      //   },
      // },
      {
        required: true,
        title: title,
        field: 'x1',
        editType: 'super-set',
        props: {
          type: 'select',
          options: [{ label: '*', value: null }],
          isDefault: true
        }
      },
      {
        title: '字段3',
        field: 'x2',
        editType: 'input'
      },
      { width: 200, title: '字段4', field: 'x3', editType: 'input' },
      {
        title: '字段5',
        field: 'x4',
        editType: 'input',
        required: true
      },
      {
        title: '字段6',
        field: 'x5',
        editType: 'input'
      }
      // {
      //   title: "分组",
      //   children: [
      //     {
      //       width: 200,
      //       title: "字段7",
      //       field: "name7x21",
      //       editType: "input",
      //       required: true,
      //       props: ({ row }) => ({
      //         onChange: ({ target }) => {
      //           row.name71 = target.value;
      //         },
      //       }),
      //     },
      //     { width: 200, title: "字段7", field: "name71", type: "money" },
      //     { width: 200, title: "字段7", field: "name72", type: "money" },
      //     { width: 200, title: "字段7", field: "name73", type: "money" },
      //     { width: 200, title: "字段7", field: "name74", type: "money" },
      //   ],
      // },

      // {
      //   width: 200,
      //   title: "字段7",
      //   editType: "input",
      //   required: true,
      //   field: "name75",
      //   type: "money",
      // },
    ],
    query: (a, b, c) => {
      return Promise.resolve({
        data: list.map((item) => ({ ...item }))
      });
    }
  },

  apis: {
    remove: (data) => handler('remove', data),
    removeBatch: (data) => handler('removeBatch', data),
    add: (data) => handler('add', data),
    edit: (data) => handler('edit', data),
    switch: (checked, data) => handler('switch', data, checked)
  },
  actions: [
    {
      label: '取消编辑',
      click: () => {
        table.value.mainTable.cancel();
      }
    },
    {
      label: '第二行编辑',
      type: 'danger',
      ghost: true,
      click: (e, c) => {
        const data = table.value.mainTable.table.getTableData().fullData;
        table.value.mainTable.setEdit(data[1]);
      }
    },
    {
      label: '第二行-删除',
      type: 'danger',
      ghost: true,
      click: (e, c) => {
        const data = table.value.mainTable.table.getTableData().fullData;
        table.value.mainTable.remove(data[1]);
      }
    },
    {
      label: '函数新增',
      click: () => {
        table.value.mainTable.add().then((row) => {
          table.value.mainTable.table.scrollToRow(row);
        });
      }
    },
    {
      label: '批量编辑',
      type: 'primary',
      click: (e, c) => {
        editMode.value = 'multiple';
      }
    },
    {
      label: '取消保存',
      type: 'primary',
      click: (e, c) => {
        editMode.value = 'row';
        console.log(table.value);
        table.value.cancelEditRows();
      }
    },
    {
      label: '保存',
      type: 'primary',
      click: (e, c) => {
        const rows = table.value.getEditRows();
        editMode.value = 'row';
        console.log(rows);
      }
    },
    {
      label: '新增',
      buttonType: 'dropdownButton',
      menus: () => {
        return [
          { label: '菜单1' + type.value, value: '1' },
          { label: '菜单2', value: '2' },
          { label: '菜单3', value: '3' },
          { label: '菜单4', value: '4' },
          { label: '菜单5', value: '5' }
        ];
      },
      click: (e, c) => {
        console.log(e, c);
        return;
      }
    }
  ],
  sub: {
    title: '商品明细',
    operates: {
      checkbox: true
    },
    actions: [
      {
        label: '按钮1',
        disabled: (rows) => rows?.length == 0,
        click: (e, checkedRows) => {
          console.log(e, checkedRows);
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve({ isSuccess: true, msg: '操作成功' });
            }, 1000);
          });
        },
        type: 'primary'
      }
    ],
    columns: (row) => [
      { title: '字段1', field: 'field1' },
      { title: '字段1', field: 'field2' },
      { title: '字段1', field: 'field3' },
      { title: '字段1', field: 'field4' },
      { title: '字段1', field: 'field5' },
      { title: '字段1', field: 'field6' }
    ],
    query: (row) => {
      return Promise.resolve({
        pageInfo: {
          total: 50,
          currentPage: 1
        },
        data: [
          ...new Array(10).fill(null).map((item) => ({
            field1: '字段1- ' + row.name1,
            field2: '字段2' + row.name1,
            field3: '字段3' + row.name1,
            field4: '字段4' + row.name1,
            field5: '字段5' + row.name1,
            field6: '字段6' + row.name1
          }))
        ]
      });
    }
  }
});
</script>
